<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Menu</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navigation">
    <div class="menuToogle"></div>
    <ul>
      <li class="list active">
        <a href="#" style="--clr: #f44336">
          <span class="icon">
            <ion-icon name="home-outline"></ion-icon>
          </span>
          <span class="text">Home</span>
        </a>
      </li>
      <li class="list">
        <a href="#" style="--clr: #ffa117">
          <span class="icon">
            <ion-icon name="people-outline"></ion-icon>
          </span>
          <span class="text">About</span>
        </a>
      </li>
      <li class="list">
        <a href="#" style="--clr: #0fc70f">
          <span class="icon">
            <ion-icon name="chatbox-outline"></ion-icon>
          </span>
          <span class="text">Message</span>
        </a>
      </li>
      <li class="list">
        <a href="#" style="--clr: #2196f3">
          <span class="icon">
            <ion-icon name="camera-outline"></ion-icon>
          </span>
          <span class="text">Photos</span>
        </a>
      </li>
      <li class="list">
        <a href="#" style="--clr: #b145e9">
          <span class="icon">
            <ion-icon name="settings-outline"></ion-icon>
          </span>
          <span class="text">Settings</span>
        </a>
      </li>
    </ul>
  </div>
</body>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
  let menuToggle = document.querySelector('.menuToogle')
  let navigation = document.querySelector('.navigation')

  menuToggle.onclick = function() {
    navigation.classList.toggle('active')
  }

  let list = document.querySelectorAll('.list')

  function activeLink() {
    list.forEach(item => {
      item.classList.remove('active')
    })
    this.classList.add('active')
  }

  list.forEach(item => item.addEventListener('click', activeLink))
</script>

</html>